<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>内容管理</el-breadcrumb-item>
            </el-breadcrumb>
      </div>
          <!-- 数据列表 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="list-table"
        size="mini"
      >
         <el-table-column
           prop="title"
           label="文章标题"
           width="200">
         </el-table-column>
         <el-table-column
           prop="total_comment_count"
           label="总评论数"
           width="140">
         </el-table-column>
          <el-table-column
           prop="fans_comment_count"
           label="粉丝评论数"
           width="140">
         </el-table-column>
         <el-table-column
           prop="comment_status"
           label="状态">
            <template slot-scope="scope">
            <el-button v-if="scope.row.comment_status===true" disabled type="primary" size="mini">关闭</el-button>
            <el-button v-if="scope.row.comment_status===false" disabled type="success" size="mini">正常</el-button>
          </template>
         </el-table-column>
         <el-table-column
           label="操作">
           <template slot-scope="scope">
                <el-button v-if="scope.row.comment_status===true" type="danger" size="mini" @click="hAmendComment(scope.row.id,!scope.row.comment_status)">打开评论</el-button>
                <el-button v-if="scope.row.comment_status===false" type="primary" size="mini" @click="hAmendComment(scope.row.id,!scope.row.comment_status)">关闭评论</el-button>
           </template>
    </el-table-column>
</el-table>
      <!-- /数据列表 -->
      <!-- 列表分页 -->
      <el-pagination
        layout="prev, pager, next"
        background
        :current-page.sync="curPage"
        :page-size="10"
        :total="total_count" class="paging"
        @current-change="hPageChange"
        >
      </el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { getCommentList, AmendComment } from '@/api/comment'
export default {
  data () {
    return {
      response_types: 'comment',
      curPage: 1, // 当前要查询的页码默认为1
      total_count: 0, // 当前查询的总条数
      channels: [],
      tableData: [], // 评论列表数据
      allow_comment: null
    }
  },
  methods: {
    hPageChange (curPage) {
      this.curPage = curPage
      this.hgetCommentList()
    },
    hgetCommentList () {
      getCommentList({
        page: this.curPage,
        response_type: this.response_types
      }).then(res => {
        this.tableData = res.data.data.results
        this.total_count = res.data.data.total_count
      })
    },
    hAmendComment (id, allowComment) {
      const params = {
        article_id: id.toString()
      }
      const data = {
        allow_comment: allowComment
      }
      console.log(params)
      console.log(data)
      AmendComment(params, data).then(res => {
        this.hgetCommentList()
      })
    }
  },
  mounted () {
    this.hgetCommentList()
  }
}
</script>

<style lang="less" scoped>
  .el-table--mini{
    font-size: 14px;
  }
</style>
